<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="bw1" aaa="bw2" class="bw3" index="bw3"></div>

    <script>
        //获取div所有属性的值
         const divObj = document.querySelector("div");

         console.dir(divObj)
         console.log(divObj.id) //bw1
         console.log(divObj.aaa)    //undefined
         
         //获取aaa属性的值
         console.log(typeof divObj.attributes)  //object

         //返回的是  aaa = bw2
         console.log(divObj.attributes[1])
         console.log(divObj.attributes.aaa)
         console.log(typeof divObj.attributes.aaa)  //object
         console.dir(divObj.attributes.aaa)
         //获取属性名
         console.dir(divObj.attributes.aaa.name)    //aaa
         //获取属性值
         console.dir(divObj.attributes.aaa.value)   //bw2

         //通过getAttribute()获取属性
         console.log(divObj.getAttribute("aaa"))   //bw2
         console.log(divObj.getAttribute("aaa1"))   //null
         console.log(divObj.getAttribute("id"))     //bw1

         //修改index属性的值
         console.log(divObj.getAttribute("index")) 
         divObj.setAttribute("index","哈哈");
         console.log(divObj.getAttribute("index")) 

         //如果修改的属性不存在 ?       当修改的属性不存在的时候，就相当于添加新属性
         divObj.setAttribute("ccc","222")
         
         console.log(divObj.getAttribute("ccc"))




    </script>
    
</body>
</html>